<script lang="ts">
    import { Power, STM32_Power, main_grid_cols, myCardArray, SwCheckbox, jiankongState, shebeiState } from '$lib/data';

    import { Alert, Toggle, Checkbox, P, Range, Label, Card } from 'flowbite-svelte';
    import { CloseOutline } from 'flowbite-svelte-icons';
    import { fade, fly, draw } from 'svelte/transition';

    //监视台ui控制
    function changecb0(){
        if(SwCheckbox[0]){
            myCardArray.update((array) => {
                return [...array, 1];
            });
        }else if(!SwCheckbox[0]){
            myCardArray.update((array) => {
                return array.filter(item => item !== 1);
            });
        }
    }
    function changecb1(){
        if(SwCheckbox[1]){
            myCardArray.update((array) => {
                return [...array, 2];
            });
        }else if(!SwCheckbox[1]){
            myCardArray.update((array) => {
                return array.filter(item => item !== 2);
            });
        }
    }
    function changecb2(){
        if(SwCheckbox[2]){
            myCardArray.update((array) => {
                return [...array, 3];
            });
        }else if(!SwCheckbox[2]){
            myCardArray.update((array) => {
                return array.filter(item => item !== 3);
            });
        }
    }
    function changecb3(){
        if(SwCheckbox[3]){
            myCardArray.update((array) => {
                return [...array, 4];
            });
        }else if(!SwCheckbox[3]){
            myCardArray.update((array) => {
                return array.filter(item => item !== 4);
            });
        }
    }
</script>

<Alert class="transition-shadow duration-300 ease-in-out hover:shadow-lg ">
    状态:
    {#if $Power}
    <Alert color="green">
        正在运行
    </Alert>
    {:else}
    <Alert color="red">
        设备已全部关闭
    </Alert>
    {/if}
    
    <div class="mt-[2rem]">设备总开关</div>
    <Toggle class="p-2" checked={$Power} onclick={() => Power.update(value => value = !value)}>
        
    </Toggle>

</Alert>

{#if $shebeiState}
    <ul in:fly={{ x: -600, duration: 500 }} out:fly={{ x: -200, duration: 200 }} class="w-[16rem] ml-[2rem] mt-[2rem] bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600 transition-shadow duration-300 ease-in-out hover:shadow-lg ">
        <li class="p-4 text-center"><CloseOutline class="absolute m-0.9" onclick={() => {$shebeiState = !$shebeiState}}></CloseOutline><span>设备控制</span></li>
        <li class="p-3"><Toggle>STM32:{#if $STM32_Power}运行{:else}关闭{/if}</Toggle></li>
        <li class="p-3"><Toggle></Toggle></li>
        <li class="p-3"><Toggle></Toggle></li>
        <li class="p-3"><Toggle></Toggle></li>
    </ul>
{/if}

{#if $jiankongState}
    <ul in:fly={{ x: -600, duration: 500 }} out:fly={{ x: -200, duration: 200 }} class="w-[14rem] ml-[4rem] mt-[2rem] bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600 transition-shadow duration-300 ease-in-out hover:shadow-lg ">
        <li class="p-4 text-center"><CloseOutline class="absolute m-0.9" onclick={() => {$jiankongState = !$jiankongState}}></CloseOutline><span>监视台</span></li>
        <li><Checkbox class="p-3" bind:checked={SwCheckbox[0]} onchange={() => (changecb0())}>STM32状态</Checkbox></li>
        <li><Checkbox class="p-3" bind:checked={SwCheckbox[1]} onchange={() => (changecb1())}>电机状态</Checkbox></li>
        <li><Checkbox class="p-3" bind:checked={SwCheckbox[2]} onchange={() => (changecb2())}>变送器输出</Checkbox></li>
        <li><Checkbox class="p-3" bind:checked={SwCheckbox[3]} onchange={() => (changecb3())}>电压电流</Checkbox></li>
    </ul>
{/if}

<Card class="my-4 transition-shadow duration-300 ease-in-out hover:shadow-lg ">
    <Label>每行设备显示数:<div>{$main_grid_cols}</div></Label>
    <Range id="large-range" size="lg"  min="1" max="4" bind:value={$main_grid_cols}/>
</Card>